<template>
  <div class="project-description">
    <h2>项目描述</h2>
    <form @submit.prevent="saveProject">
      <div class="form-group">
        <label for="projectName">项目名称:</label>
        <input type="text" id="projectName" v-model="project.name" required>
      </div>
      <div class="form-group">
        <label for="projectDescription">项目描述:</label>
        <textarea id="projectDescription" v-model="project.description" required></textarea>
      </div>
      <button type="submit">保存</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      project: {
        name: '示例项目',
        description: '这是一个示例项目，用于演示项目管理功能。'
      }
    };
  },
  methods: {
    async saveProject() {
      try {
        const response = await axios.post('http://localhost:8080/project/save', this.project); // 替换 '/api/projects' 为你的后端 API 地址
        console.log('Project saved:', response.data);
        // 根据需要处理响应数据
      } catch (error) {
        console.error('Failed to save project:', error);
        // 处理错误情况
      }
    },
  },
  }
</script>

<style scoped>
.project-description {
  max-width: 600px;
  margin: auto;
}

.form-group {
  margin-bottom: 1em;
}

label {
  display: block;
  margin-bottom: 0.5em;
}

input,
textarea {
  width: 100%;
  padding: 0.5em;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 0.5em 1em;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>